import React from 'react';
import { IndexBar, Tabs, Cell, Toast, NavBar } from 'react-vant';
import { Search } from '@react-vant/icons';
// import { useNavigate } from 'react-router-dom'
import { history } from 'umi';
import 'lib-flexible';
import '@/pages/golobo.less';

const indexList = [];
const customIndexList = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
];
const charCodeOfA = 'A'.charCodeAt(0);

for (let i = 0; i < 26; i += 1) {
  indexList.push(String.fromCharCode(charCodeOfA + i));
}

export default function index() {
  //返回电影购票页面
  let back = () => {
    history.push('/films');
  };
  return (
    <div>
      <div className="jk">
        <NavBar title="城市选择" leftText="返回" onClickLeft={back} />
      </div>

      <Tabs>
        <Tabs.TabPane title="">
          <IndexBar indexList={customIndexList}>
            {customIndexList.map((item) => (
              <div key={item}>
                <IndexBar.Anchor index={item}> {item}</IndexBar.Anchor>
                <Cell title="北京" />
                <Cell title="上海" />
                <Cell title="广东" />
              </div>
            ))}
          </IndexBar>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}
